show follows and followers

8 files changed, 276 insertions, 0 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.server.js b/src/routes/(app)/[username]/(profile)/+layout.server.js
new file mode 100644
index 00000000..c97c7bdb
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+layout.server.js
@@ -0,0 +1,6 @@
+export async function load({ depends, parent }) {
+	depends('app:user');
+	let { subject } = await parent();
+	console.log('SUBJ', subject);
+	return { subject };
+}
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
new file mode 100644
index 00000000..3fc01721
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -0,0 +1,130 @@
+<script>
+	import { Icon } from '$comp';
+	import { t } from '$lib/translations';
+	import { sign, send } from '$lib/nostr';
+
+	export let data;
+	let events, user, subject, src, text;
+	$: ({ events, user, subject, src, text } = data);
+	$: ({ username: n } = subject);
+
+	$: username = n.length > 60 ? n.substr(0, 6) : n;
+
+	let follow = async () => {
+		user.follows.push(['p', subject.pubkey, 'wss://nostr.coinos.io', subject.username]);
+		update();
+	};
+
+	let unfollow = async () => {
+		user.follows.splice(
+			user.follows.findIndex((t) => t[1] === subject.pubkey),
+			1
+		);
+		update();
+	};
+
+	let update = async () => {
+		let event = {
+			pubkey: user.pubkey,
+			created_at: Math.floor(Date.now() / 1000),
+			kind: 3,
+			content: '',
+			tags: user.follows
+		};
+
+		user.follows = user.follows;
+
+		await sign({ event, user });
+		await send(event);
+	};
+
+	$: following = user?.follows.find((t) => t.includes(subject.pubkey));
+</script>
+
+<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap md:flex-nowrap">
+	<div class="hidden lg:block w-[240px] md:mr-10" />
+	<div class="w-[240px] lg:absolute pt-20 space-y-5 left-20 mx-auto md:mr-10">
+		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{username}</h1>
+
+		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
+			{subject.address && subject.address !== 'null' ? subject.address : ''}
+		</div>
+
+		<div class="flex justify-around">
+			<a href={`/${subject.username}/follows`}><b>{subject.follows.length}</b> Following</a>
+			<a href={`/${subject.username}/followers`}><b>{subject.followers.length}</b> Followers</a>
+		</div>
+
+		<div class="flex flex-wrap gap-2 w-full">
+			{#if user && user.username !== subject.username}
+				{#if following}
+					<div class="w-full flex">
+						<button
+							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+							on:click={unfollow}
+						>
+							<div class="mx-auto flex">
+								<Icon icon={'profile'} style="my-auto" />
+								<div>{$t('user.unfollow')}</div>
+							</div>
+						</button>
+					</div>
+				{:else}
+					<div class="w-full flex">
+						<button
+							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+							on:click={follow}
+						>
+							<div class="mx-auto flex">
+								<Icon icon={'profile'} style="my-auto" />
+								<div>{$t('user.follow')}</div>
+							</div>
+						</button>
+					</div>
+				{/if}
+			{/if}
+			{#if !subject.anon}
+				<div class="w-full flex">
+					<a href={`/${subject.username}/receive`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<div style="mr-1">⚡️</div>
+								<div>{$t('user.lightning')} {$t('user.invoice')}</div>
+							</div>
+						</button>
+					</a>
+				</div>
+
+				<div class="w-full flex">
+					<a href={`/${subject.username}/receive/bitcoin`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
+								<div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
+							</div>
+						</button>
+					</a>
+				</div>
+
+				{#if user?.username !== subject.username}
+					<div class="w-full flex">
+						<a href={`/${subject.username}/request`} class="mx-auto">
+							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+								<div class="mx-auto flex">
+									<Icon icon="support" style="mr-1" />
+									<div>{$t('transactions.requestAnInvoice')}</div>
+								</div>
+							</button>
+						</a>
+					</div>
+				{/if}
+			{/if}
+		</div>
+	</div>
+
+	<div class="w-full md:pt-12 lg:pt-0">
+		<div class="mx-auto space-y-5 mt-5 lg:max-w-lg xl:max-w-2xl">
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
new file mode 100644
index 00000000..9c91efae
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -0,0 +1,21 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+	if (!pubkey) pubkey = params.username;
+
+	let events = [];
+
+	try {
+		events = await get(`/nostr/${pubkey}`);
+	} catch (e) {
+		console.log(`failed to fetch nostr events for ${pubkey}`, e);
+	}
+
+	events.map((e) => {
+		e.seen = e.created_at;
+	});
+
+	return { events };
+}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
new file mode 100644
index 00000000..19687ed0
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { Feed } from '$comp';
+	import { t } from '$lib/translations';
+
+	export let data;
+	let { events, user } = data;
+</script>
+
+{#if events.length}
+	<Feed {events} {user} />
+{:else}
+	<div class="text-center text-2xl mt-20">
+		Nothing here yet. Post your first <a
+			href="https://github.com/nostr-protocol/nostr#nostr---notes-and-other-stuff-transmitted-by-relays"
+			class="underline">nostr</a
+		> note!
+	</div>
+{/if}
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.server.js b/src/routes/(app)/[username]/(profile)/followers/+page.server.js
new file mode 100644
index 00000000..a05d324d
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.server.js
@@ -0,0 +1,10 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+
+	let followers = await get(`/${pubkey}/followers`);
+
+	return { followers };
+}
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
new file mode 100644
index 00000000..a718ff15
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Avatar } from '$comp';
+	import { browser } from '$app/environment';
+	import VirtualScroll from 'svelte-virtual-scroll-list';
+
+	export let data;
+	let { followers } = data;
+	let w;
+</script>
+
+<svelte:window bind:innerWidth={w} />
+
+<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+	{#if browser}
+		{#if followers.length}
+			<VirtualScroll data={followers} key="username" let:data pageMode={true}>
+				<a href={`/${data.username}`}>
+					<div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.username}>
+						<div class="mb-auto mr-2">
+							<div class="md:hidden">
+								<Avatar size={12} user={data} disabled={true} />
+							</div>
+							<div class="hidden md:block">
+								<Avatar size={20} user={data} disabled={true} />
+							</div>
+						</div>
+
+						<div class="w-full flex pb-1 text-black my-auto">
+							<div>
+								{data.display_name || ''} <span class="text-secondary">@{data.username}</span>
+							</div>
+						</div>
+					</div>
+				</a>
+			</VirtualScroll>
+		{:else}
+			<div>No followers</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.server.js b/src/routes/(app)/[username]/(profile)/follows/+page.server.js
new file mode 100644
index 00000000..60b95636
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.server.js
@@ -0,0 +1,11 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { subject } = await parent();
+	let { pubkey } = subject;
+
+	let follows = await get(`/${pubkey}/follows`);
+
+	console.log('GOT', follows);
+	return { follows };
+}
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
new file mode 100644
index 00000000..87e34501
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Avatar } from '$comp';
+	import { browser } from '$app/environment';
+	import VirtualScroll from 'svelte-virtual-scroll-list';
+
+	export let data;
+	let { follows } = data;
+	let w;
+</script>
+
+<svelte:window bind:innerWidth={w} />
+
+<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+	{#if browser}
+		{#if follows.length}
+			<VirtualScroll data={follows} key="username" let:data pageMode={true}>
+				<a href={`/${data.username}`}>
+					<div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.username}>
+						<div class="mb-auto mr-2">
+							<div class="md:hidden">
+								<Avatar size={12} user={data} disabled={true} />
+							</div>
+							<div class="hidden md:block">
+								<Avatar size={20} user={data} disabled={true} />
+							</div>
+						</div>
+
+						<div class="w-full flex pb-1 text-black my-auto">
+							<div>
+								{data.display_name || ''} <span class="text-secondary">@{data.username}</span>
+							</div>
+						</div>
+					</div>
+				</a>
+			</VirtualScroll>
+		{:else}
+			<div>No follows</div>
+		{/if}
+	{/if}
+</div>